<template>
	<view class="user-info">
		<view class="user-info-header">
			<view class="head_bg_container" @click="showOther?'':showHeaderBg = true">
				<image class="head_bg" :src="cachedHeaderBg" mode="aspectFill"></image>
				<view class="head_bg_overlay"></view>
			</view>
			<view class="user-avatar">
				<u-avatar class="avatar" :src="cachedUserAvatar" size="80" mode="aspectFill"
					@click="showAvatar = true"></u-avatar>
				<view class="name">
					<view class="title">
						<view class="title-left">
							<view @click="showOther?onRemark():onEdit(0)">{{userInformation.nickName||'暂无昵称'}}</view>
						</view>
						<!-- 	<view class="title-right" v-if="showOther && !isFollowed" @click.stop="onFollow()">
							<u-icon name="plus" class="icon" :plain="true" size="14" shape="circle"
								color="#fff"></u-icon>关注
						</view> -->

					</view>
					<view class="title_sub">
						<view class="title-right-zh">
							账号：{{userInformation.userName}}
						</view>
						<u-icon name="grid" @click="showMyQRCode" size="25" color="rgba(255, 255, 255, .7)"></u-icon>
					</view>
				</view>
			</view>
			<view class="my-data">
				<!-- <view class="my-data-item">
					<text class="num">{{userInformation.postNum||0}}</text>
					<text class="text">
						发布
					</text>
				</view> -->
				<view class="my-data-item" @click="onMyFollow">
					<text class="num">{{userInformation.regardNum||0}}</text>
					<text class="text">
						关注
					</text>
				</view>
				<view class="my-data-item" @click="onMyFans">
					<text class="num">{{userInformation.fansNum||0}}</text>
					<text class="text">
						粉丝
					</text>
				</view>
				<view class="my-data-item">
					<text class="num">{{userInformation.likeNum?userInformation.likeNum : 0}}</text>
					<text class="text">
						获赞
					</text>
				</view>
			</view>
			<!-- 功能入口模块 -->
			<view class="action-entry-section" v-if="!showOther">
				<scroll-view class="action-entry-scroll" scroll-x="true" show-scrollbar="false">
					<view class="action-entry-list">
						<view class="action-entry-item" v-for="item in actionEntries" :key="item.title"
							@click="handleActionEntryClick(item)">
							<view class="entry-item-title">
								<text :class="['userIconFont entry-icon', item.icon]"></text>
								<text class="entry-title">{{ item.title }}</text>
							</view>
							<text class="entry-subtitle">{{ item.subtitle }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="user-info-my">
			<image class="user-info-my-bg"
				src="http://www.hacn86.cn/home_page/2025/07/09/1752031056084_20250709111736A003.png"></image>


			<view class="my-block">
				<view class="title">
					<view class="">
						<text v-if="showOther">TA</text><text v-else>我</text>是谁
					</view>
					<u-button v-if="!showOther"
						customStyle="margin:0 0 0 20rpx;width:130rpx;background:none;border-color:#E8E6E4;"
						shape="circle" plain :hairline="true" size="mini" text="编辑资料" @click="onEdit(0)"></u-button>
				</view>
				<view class="user-des" @click="showOther?'':onEdit()">
					<view class="" v-if="!userInformation.des">
						<uni-icons type="compose"></uni-icons>
						编辑个签，展示我的独特态度
					</view>
					<view v-else>个性签名：{{userInformation.des}}</view>
				</view>
				<view class="i-data">
					<view class="i-data-left">
						<view class="i-data-row">
							<view class="i-data-row-sub">性别</view>
							<text v-if="!userInformation.sex && !showOther" class="i-data-row-none"
								@click="onEdit(0)">选择性别</text>
							<text
								v-else>{{userInformation.sex==0?'男':(userInformation.sex==1?'女':'未填写') || '未填写'}}</text>
						</view>
						<view class="i-data-row">
							<view class="i-data-row-sub">居住地</view>
							<text v-if="!userInformation.address && !showOther" class="i-data-row-none"
								@click="onEdit(0)">未填写</text>
							<text v-else>{{userInformation.address || '未填写'}}</text>

						</view>
						<view class="i-data-row">
							<view class="i-data-row-sub">生日</view>
							<text v-if="!userInformation.birthday && !showOther" class="i-data-row-none"
								@click="onEdit(0)">未填写</text>
							<text v-else>{{getFormat(userInformation.birthday) || '未填写'}}</text>

						</view>
						<view class="i-data-row">
							<view class="i-data-row-sub">学校</view>
							<text v-if="!userInformation.school && !showOther" class="i-data-row-none"
								@click="onEdit(0)">未填写</text>
							<text v-else>{{userInformation.school || '未填写'}}</text>

						</view>
					</view>
					<view class="i-data-right">
						<view class="i-data-row">
							<view class="i-data-row-sub">身高</view>
							<text v-if="!userInformation.height && !showOther" class="i-data-row-none"
								@click="onEdit(0)">未填写</text>
							<text v-else>{{userInformation.height?userInformation.height+'cm' : '未填写'}}</text>

						</view>
						<view class="i-data-row">
							<view class="i-data-row-sub">老家</view>
							<text v-if="!userInformation.hometown && !showOther" class="i-data-row-none"
								@click="onEdit(0)">未填写</text>
							<text v-else>{{userInformation.hometown || '未填写'}}</text>

						</view>
						<view class="i-data-row">
							<view class="i-data-row-sub">星座</view>

							<text v-if="!userInformation.starsign && !showOther" class="i-data-row-none"
								@click="onEdit(0)">未填写</text>
							<text v-else>{{userInformation.starsign || '未填写'}}</text>
						</view>
						<view class="i-data-row">
							<view class="i-data-row-sub">职业</view>
							<text v-if="!userInformation.job && !showOther" class="i-data-row-none"
								@click="onEdit(0)">未填写</text>
							<text v-else>{{userInformation.job || '未填写'}}</text>

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-block" :class="tagList.length === 0?'tag-empty-state':''">
			<view class="tag-header-container">
				<view class="title">
					<text v-if="showOther">TA</text><text v-else>我</text>的标签
					<u-button v-if="isTagEdit" class="tag-box-edit-btn" customStyle="margin-left:20rpx;width:100rpx;"
						@click="closeEditTag" color="#ff9900" type="primary" size="mini" :plain="true"
						text="完成"></u-button>
				</view>
				<view class="tag-action-prompt" v-if="tagList.length==0" @click="openTagSelectionPopup">
					<text>编辑个人标签，展示我的独特态度。</text>
					<u-icon name="arrow-right" color="#888888" size="14" customStyle="margin-left: 8rpx;"></u-icon>
				</view>
			</view>
			<view class="tag-box" v-if="tagList.length !== 0">
				<view class="tag-box-item" :style="{'background':tagBg[getTagIndex(index)].color}"
					v-for="(item,index) in tagList" :key="item.topicId">
					<!-- 字体图标 -->
					<text :class="['userIconFont', cachedTagIcons[getTagIndex(index)]]" class="tag-icon"></text>
					<!-- u-tag 组件，现在只负责显示文字和关闭按钮 -->
					<u-tag :text="item.topicTitle" shape="circle" :closable="isTagEdit" @close="removeTag(index)"
						:bgColor="tagBg[getTagIndex(index)].color" borderColor="transparent" color="#2F2E35" plain
						customStyle="padding: 0 16rpx 0 8rpx;"></u-tag>
				</view>
				<u-button v-if="!showOther" class="tag-box-item" @click="openTagSelectionPopup" type="primary"
					color="#ff9900" icon="plus" iconSize="10" customStyle="margin-left:20rpx;width:130rpx;" size="mini"
					:plain="true" text="添加标签"></u-button>
			</view>
		</view>

		<u-popup :show="showTagSelectionPopup" @close="closeTagSelectionPopup" mode="bottom" round="10">
			<view class="tag-popup-content">
				<view class="popup-header">
					<text>选择标签</text>
					<u-icon name="close" size="20" @click="closeTagSelectionPopup"></u-icon>
				</view>
				<scroll-view scroll-y style="max-height: 60vh;">
					<view v-for="(category, catIndex) in popupTagCategories" :key="catIndex"
						class="tag-category-section">
						<view class="popup-section-title">{{ category.title }}</view>
						<view class="tag-item-container">
							<view v-for="(tag, tagIndex) in category.topicsList" :key="tag.topicId"
								class="popup-tag-item">
								<u-tag :text="tag.title" shape="circle" :name="tag.topicId"
									@click="toggleTagInPopup(tag, 'predefined')"
									:plain="!isTagSelectedInPopup(tag.topicId)"
									:bgColor="isTagSelectedInPopup(tag.topicId) ? tagBg[getTagIndex(transientTagListInPopup.findIndex(t => t.topicId === tag.topicId))].color : '#FFFFFF'"
									:color="isTagSelectedInPopup(tag.topicId) ? '#2F2E35' : '#606266'"
									:borderColor="isTagSelectedInPopup(tag.topicId) ? tagBg[getTagIndex(transientTagListInPopup.findIndex(t => t.topicId === tag.topicId))].color : '#DCDADB'"
									:icon="isTagSelectedInPopup(tag.topicId) ? cachedTagIcons[getTagIndex(transientTagListInPopup.findIndex(t => t.topicId === tag.topicId))] : ''">
								</u-tag>
							</view>
						</view>
					</view>

					<view class="popup-section-title">自定义标签</view>
					<view class="custom-tag-input-section">
						<u-input placeholder="请输入自定义标签" border="surround" v-model="newCustomTagInPopup"
							customStyle="flex:1; margin-right: 20rpx;"></u-input>
						<view class="custom-tag-input-add">
							<u-button @click="addCustomTagFromPopupInput" color="#ff9900" type="primary" :plain="true"
								size="small" text="添加"></u-button>
						</view>
					</view>
					<view class="tag-item-container" v-if="customTagsInPopup.length > 0">
						<view v-for="(tag, customTagIndex) in customTagsInPopup" :key="tag.topicId"
							class="popup-tag-item" :style="{'background':tagBg[getTagIndex(customTagIndex)].color}">
							<text :class="['userIconFont', cachedTagIcons[getTagIndex(customTagIndex)]]"
								class="tag-icon"></text>
							<u-tag :text="tag.topicTitle" plain shape="circle"
								:bgColor="tagBg[getTagIndex(customTagIndex)].color" closable borderColor="transparent"
								color="#2F2E35" plain @close="removeCustomTagInPopup(customTagIndex)">
							</u-tag>
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<u-button shape="circle" :text="'完成 (已选' + transientTagListInPopup.length + '个)'" size="large"
						color="linear-gradient(to right, #F8D43D, #F1903D)" @click="confirmAndSaveTags"></u-button>
				</view>
			</view>
		</u-popup>

		<view class="my-block" v-if="showOther">
			<view class="title my-power" @click="onPower">

				<view class="my-power-left">
					<u-icon style="margin-right: 30rpx;" :name="cachedPyqxIcon" :bold="true" size="20"></u-icon>朋友权限
				</view>
				<u-icon name="arrow-right" :bold="true" size="20"></u-icon>
			</view>
		</view>




		<view class="my-block" v-if="showOther" @click="onRelease">
			<view class="title">
				TA的发布
			</view>
			<u-empty mode="data" v-if="cachedPostListImages.length==0"></u-empty>
			<view class="my-release" v-else>
				<view class="my-release-item">
					<image v-if="item" v-for="(item, idx) in cachedPostListImages" :key="idx" class="image" :src="item"
						mode="aspectFill"></image>
				</view>
				<u-icon name="arrow-right" :bold="true" size="20"></u-icon>
			</view>
		</view>

		<view class="my-block" v-if="!showOther" @click="onAlbum">
			<view class="album-header-container">
				<view class="title">我的相册</view>
				<view class="album-action-prompt" v-if="cachedAlbumImages.length === 0">
					<text>记录你的专属记忆</text>
					<u-icon name="arrow-right" color="#888888" size="14" customStyle="margin-left: 8rpx;"></u-icon>
				</view>
			</view>
			<image class="album-empty-state" v-if="cachedAlbumImages.length === 0"
				src="http://www.hacn86.cn/home_page/2025/07/11/1752220726144_20250711155846A012.png" mode=""></image>

			<view class="album-content-area">
				<view v-if="cachedAlbumImages.length !== 0" class="album-list-display">
					<view class="album-list-scroll">
						<view class="album-item" v-for="(albumImage, index) in cachedAlbumImages" :key="index">
							<image class="album-item-image" :src="albumImage" mode="aspectFill"></image>
						</view>
					</view>
					<u-icon name="arrow-right" :bold="true" size="18" color="#BDBDBD"></u-icon>
				</view>
			</view>
		</view>


		<!-- 如何成为本地达人 -->
		<!-- 	<view class="my-block" v-if="!showOther">
			<view class="title my-power" @click="ApplyForLocalExpert()">
				<view class="my-power-left">
					{{ userInfo.isExpert == 1 ?'我是达人':'申请本地达人'}}
				</view>
				<view class="my-power-right">
					{{userInfo.isExpert == 0  ? '去申请' : userInfo.isExpert == 1  ? "去修改"  :  userInfo.isExpert == 2 ? '已驳回' :  '去申请'}}
					<u-icon name="arrow-right" :bold="true" size="18" color="#BDBDBD"></u-icon>
				</view>
			</view>
		</view> -->

		<!-- 如何成为本地向导 -->
		<!-- <view class="my-block" v-if="!showOther">
			<view class="title my-power" @click="ApplyForGuide()">
				<view class="my-power-left">
					申请本地向导
				</view>
		
				<view class="my-power-right">
					<view class="">
						{{userInfo.isGuide == 0  ? '去申请' : userInfo.isGuide == 1  ? "去修改"  :  userInfo.isGuide == 2 ? '已驳回' :  '去申请'}}
					</view>
					<u-icon name="arrow-right" :bold="true" size="18" color="#BDBDBD"></u-icon>
				</view>
			</view>
		</view> -->

		<view class="footerBtn" v-if="!showOther">
			<view class="btnItem btnItemImg-left" @click="ApplyForLocalExpert(userInfo.isExpert)">
				<view class="btnItem-left">
					<view class="btnItem-left-top">
						{{ userInfo.isExpert == 1 ?'我是达人':'本地达人认证'}}
					</view>
					<view class="btnItem-left-bottom">
						认证达人，私藏尽享
					</view>
				</view>
				<view class="btnItem-right">
					<u-icon name="arrow-right" :bold="true" size="18" color="rgba(0, 0, 0, 1)"></u-icon>
				</view>
			</view>

			<view class="btnItem btnItemImg-right" @click="ApplyForGuide(userInfo.isGuide)">
				<view class="btnItem-left">
					<view class="btnItem-left-top">
						{{ userInfo.isGuide == 1 ?'我是向导':'本地向导认证'}}
					</view>
					<view class="btnItem-left-bottom">
						认证向导，玩转本地
					</view>
				</view>
				<view class="btnItem-right">
					<u-icon name="arrow-right" :bold="true" size="18" color="rgba(0, 0, 0, 1)"></u-icon>
				</view>
			</view>
		</view>

		<view class="footerBtn" v-if="!showOther">
			<view class="btnItem btnItemImg-right" @click="handleToVideo">
				<view class="btnItem-left">
					视频列表
				</view>
				<view class="btnItem-right">
					<u-icon name="arrow-right" :bold="true" size="18" color="rgba(0, 0, 0, 1)"></u-icon>
				</view>
			</view>
		</view>

		<view class="footerBtn" v-if="!showOther">
			<view class="btnItem btnItemImg-right" @click="handleToAi">
				<view class="btnItem-left">
					ai问问
				</view>
				<view class="btnItem-right">
					<u-icon name="arrow-right" :bold="true" size="18" color="rgba(0, 0, 0, 1)"></u-icon>
				</view>
			</view>
		</view>





		<view class="user-btn" v-if="showOther&&!isFollowed" @click="onFollow()">
			<u-icon name="plus" color="#FFFFFF" :bold="true" size="18"></u-icon>关注
		</view>
		<view class="user-btn" v-if="showOther&&isFollowed" @click="onChat(userInformation.id)">
			<view>聊一聊</view>
		</view>
		<u-popup :show="showAvatar" mode="center" bgColor="transparent" :overlayStyle="{background: '#000'}">
			<view class="popup-avatar">

				<u-icon @click="showAvatar = false" class="close" name="close" color="#FFFFFF" size="25"></u-icon>
				<u-avatar :src="cachedUserAvatar" shape="square" size="350" mode="aspectFill"></u-avatar>
				<view class="popup-avatar-group" v-show="!showOther">
					<view class="popup-avatar-group-item" @click="uploadAvatar">
						<view class="">
							更换头像
						</view>
						<u-icon name="photo" color="#FFFFFF" size="25"></u-icon>
					</view>
					<view class="popup-avatar-group-item" @click="downloadAvatar">
						<view class="">
							保存头像
						</view>
						<u-icon name="download" color="#FFFFFF" size="25"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showHeaderBg" mode="center" bgColor="transparent" :overlayStyle="{background: '#000'}">
			<view class="popup-avatar">

				<u-icon @click="showHeaderBg = false" class="close" name="close" color="#FFFFFF" size="25"></u-icon>
				<u-avatar :src="cachedHeaderBg" :default-url="cachedHeaderBg" shape="square" size="400"
					mode="widthFix"></u-avatar>
				<view class="popup-avatar-group">
					<view class="popup-avatar-group-item" @click="uploadHeaderBg">
						<view class="">
							更换背景图
						</view>
						<u-icon name="photo" color="#FFFFFF" size="25"></u-icon>
					</view>
					<view class="popup-avatar-group-item" @click="downloadHeaderBg">
						<view class="">
							保存背景图
						</view>
						<u-icon name="download" color="#FFFFFF" size="25"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getClientFollow,
		getUserInfoUpdate,
		postAddTopics,
		postChooseTopic,
		getQiniuToken,
		getHotTopics,
		updateUserBackground,
	} from '@/request/api.js';
	// import ImageCache from '@/utils/image-cache.js'; // 如果没有全局注册，则需要引入


	export default {
		name: "user-info",
		components: {},
		props: {
			userInfo: {
				type: Object,
				default: () => ({})
			},
			storeList: {
				type: Array,
				default: () => []
			},
			tagList: {
				type: Array,
				default: () => []
			},
			albumList: {
				type: Array,
				default: () => []
			},
			postList: {
				type: Array,
				default: () => []
			},
			showOther: {
				type: Boolean,
				default: false
			},
			showGuide: {
				type: Boolean,
				default: false
			},
			isFollowed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showAvatar: false,
				isTagEdit: false,
				userInformation: {}, // 本地副本
				tagBg: [{
					color: '#FDF9E5',
					iconClass: 'icon-tag1'
				}, {
					color: '#FAECE1',
					iconClass: 'icon-tag2'
				}, {
					color: '#E3FFFE',
					iconClass: 'icon-tag3'
				}, {
					color: '#F6FFC0',
					iconClass: 'icon-tag4'
				}, {
					color: '#FFDECF',
					iconClass: 'icon-tag5'
				}, {
					color: '#FFF9D0',
					iconClass: 'icon-tag5'
				}, ],
				cachedTagIcons: [], // 这个变量现在用来存储字体图标类名
				cachedUserAvatar: '',
				cachedHeaderBg: '',
				cachedAlbumImages: [],
				cachedPostListImages: [],
				cachedPyqxIcon: '',
				uploadToken: null,
				uploadKey: null,
				showTagSelectionPopup: false,
				popupTagCategories: [],
				transientTagListInPopup: [],
				newCustomTagInPopup: '',
				customTagsInPopup: [],
				showHeaderBg: false,
				// 功能入口数据
				actionEntries: [{
						title: "任务中心",
						subtitle: "使用积分兑换好物",
						icon: "icon-shouye", // 替换为你的图标路径
						path: "/pages_sub/index/checkin/checkin" // 假设的页面路径
					},

					{
						title: "我的订单",
						subtitle: "查看全部订单",
						icon: "icon-dingdan", // 替换为你的图标路径
						path: "/pages_sub/order/list"
					},
					{
						title: "积分商城",
						subtitle: "使用积分兑换好物",
						icon: "icon-shouye", // 替换为你的图标路径
						path: "/pages_sub/market/index" // 假设的页面路径
					},
					// {
					// 	title: "购物车",
					// 	subtitle: "共23个商品",
					// 	icon: "icon-gouwuche", // 替换为你的图标路径
					// 	path: "/pages_sub/cart/index"
					// },
					// {
					// 	title: "查看收藏",
					// 	subtitle: "查看我的收藏",
					// 	icon: "icon-shoucang", // 替换为你的图标路径
					// 	path: "/pages_sub/user/my-collections/my-collections"
					// },
					// {
					// 	title: "优惠券",
					// 	subtitle: "查看我的优惠券",
					// 	icon: "icon-shouye", // 替换为你的图标路径
					// 	path: "/pages_sub/coupons/my-coupons"
					// }
				],
			};
		},
		watch: {
			userInfo: { // 监听父组件传入的userInfo
				immediate: true,
				deep: true,
				async handler(newValue) {
					if (newValue && Object.keys(newValue).length > 0) {
						this.userInformation = JSON.parse(JSON.stringify(newValue)); // 深拷贝以避免直接修改prop
						if (newValue.avatar && newValue.avatar.startsWith(this.$store.state.ossBaseUrl)) {
							this.cachedUserAvatar = await this.$imageCache.getImage(newValue.avatar);
						} else if (newValue.avatar) {
							this.cachedUserAvatar = newValue.avatar; // 如果不是CDN的，或者是本地路径，直接用
						} else {
							// 根据性别设置默认头像
							this.cachedUserAvatar = '';
						}
						this.cachedHeaderBg = newValue.background ||
							'http://www.hacn86.cn/home_page/2025/07/09/1752031036653_20250709111716A002.jpg';
					} else {
						this.userInformation = {}; // 清空或设为默认
						this.cachedUserAvatar = ''; // 默认头像
					}
				}
			},
			tagBg: { // tagBg本身是本地数据，其内部的imageOriginal是本地路径
				immediate: true,
				deep: true,
				async handler(newVal) {
					if (newVal && newVal.length > 0) {
						// 直接映射 iconClass 数组
						this.cachedTagIcons = newVal.map(item => item.iconClass);
					} else {
						this.cachedTagIcons = [];
					}
				}
			},
			albumList: {
				immediate: true,
				deep: true,
				async handler(newVal) {
					if (newVal && newVal.length > 0) {
						this.cachedAlbumImages = await Promise.all(
							newVal.map(async (item) => {
								if (item.isImage == 1) {
									if (item.fileUrl && item.fileUrl.startsWith(this.$store.state
											.ossBaseUrl)) {
										return await this.$imageCache.getImage(item.fileUrl);
									}
									return item.fileUrl; // 如果不是CDN，直接返回
								}

							})
						);
					} else {
						this.cachedAlbumImages = [];
					}
					this.cachedAlbumImages = this.cachedAlbumImages.filter(item => item !== undefined)
				}
			},
			postList: {
				immediate: true,
				deep: true,
				async handler(newVal) {
					if (newVal && newVal.length > 0) {
						this.cachedPostListImages = await Promise.all(
							newVal.map(async (item) => {
								if (item.image && item.image.startsWith(this.$store.state.ossBaseUrl)) {
									return await this.$imageCache.getImage(item.image);
								}
								return item.image;
							})
						);
					} else {
						this.cachedPostListImages = [];
					}
				}
			}
		},
		async created() {
			// 静态资源不需要通过ImageCache
			this.cachedPyqxIcon = '/static/my/icon_pyqx.png';
		},
		methods: {
			handleToAi() {
				uni.navigateTo({
					url: '/pages_sub/common/ai-ask/ai-ask'
				})
			},
			handleActionEntryClick(item) {
				console.log(item.path);
				uni.navigateTo({
					url: item.path
				})
			},
			handleToVideo() {
				uni.navigateTo({
					url: '/pages_sub/user/videoListView/videoListView'
				})
			},
			onchangebg() {

			},
			// 本地达人身份认证
			ApplyForLocalExpert(isExpert) {
				console.log(isExpert);
				if (isExpert == 1) {
					// 是达人
					uni.navigateTo({
						url: '/pages_sub/authentication/Expert/editInformation'
					})
				} else {
					// 去认证
					uni.navigateTo({
						url: '/pages_sub/authentication/Expert/expert'
					})
				}

			},
			// 本地向导身份认证
			ApplyForGuide(isGuide) {
				console.log(isGuide);
				if (isGuide == 1) {
					// 是向导
					uni.navigateTo({
						url: '/pages_sub/authentication/Guide/selectGuideConfig'
					})

				} else {
					// 去认证
					uni.navigateTo({
						url: '/pages_sub/authentication/Guide/guide'
					})
				}
			},
			// 跳转到我的二维码页面
			showMyQRCode() {
				// 确保用户信息存在，防止异常
				if (!this.userInformation || !this.userInformation.userId) {
					uni.showToast({
						title: '无法获取用户信息',
						icon: 'none'
					});
					return;
				}
				// 将用户信息对象转换为JSON字符串，并通过encodeURIComponent编码，以便在URL中安全传递
				const userInfoStr = encodeURIComponent(JSON.stringify(this.userInformation));

				// 使用uni.navigateTo跳转到二维码页面，并通过URL参数传递用户信息
				uni.navigateTo({
					url: `/pages_sub/user/qrcode/qrcode?user=${userInfoStr}`
				});
			},
			getFormat(data) {
				if (!data) return null
				const date = new Date(data);
				const year = date.getFullYear().toString();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const yyyymmdd = year + '.' + month + '.' + day;
				return yyyymmdd;
			},
			getTagIndex(index) {
				return index % 6
			},

			onFollow() {
				console.log(111);
				this.$emit("onFollow")

			},
			onRemark() {
				this.$emit("onRemark")
			},
			onEdit() {
				uni.navigateTo({
					url: "/pages_sub/user/edit/edit"
				})
			},
			onMyFollow() {
				uni.navigateTo({
					url: "/pages_sub/user/followAndFans/followAndFans?current=0"
				})
			},
			onMyFans() {
				uni.navigateTo({
					url: "/pages_sub/user/followAndFans/followAndFans?current=1"
				})
			},
			onTagEdit() {
				this.isTagEdit = true
			},
			removeTag(index) {
				if (this.userInformation && this.userInformation.topicsList) {
					this.userInformation.topicsList.splice(index, 1);
				}
			},
			closeEditTag() {
				this.isTagEdit = false
				let params = {
					userId: this.$store.state.userInfo.userId,
					topicsIds: this.userInformation.topicsList ? this.userInformation.topicsList.map(item => item
						.topicId) : [],
				}
				getUserInfoUpdate(params).then(res => {
					if (res.data.code !== 200 && res.data.code !== 0) {
						uni.$u.toast(res.data.msg || '标签更新失败');
					} else {

						uni.$u.toast('标签已更新');

					}
				}).catch(err => {
					uni.$u.toast('标签更新请求失败');
				});
			},
			async openTagSelectionPopup() {
				this.transientTagListInPopup = JSON.parse(JSON.stringify(this.userInformation.topicsList || []));
				this.customTagsInPopup = this.transientTagListInPopup.filter(tag => !tag.isPredefined);

				try {
					const res = await getHotTopics({
						title: '个人标签'
					});
					if (res.data && res.data.data) {
						this.popupTagCategories = res.data.data.map(category => {
							return {
								...category,
								topicsList: category.topicsList.map(tag => ({
									...tag,
									title: tag.title || tag.topicTitle
								}))
							};
						});
					} else {
						this.popupTagCategories = [];
					}
				} catch (error) {
					uni.$u.toast('获取热门标签失败');
					this.popupTagCategories = [];
				}
				this.showTagSelectionPopup = true;
			},
			closeTagSelectionPopup() {
				this.showTagSelectionPopup = false;
				this.newCustomTagInPopup = '';
			},
			isTagSelectedInPopup(topicId) {
				return this.transientTagListInPopup.some(tag => tag.topicId === topicId);
			},
			toggleTagInPopup(tagItem) {
				const existingTagIndex = this.transientTagListInPopup.findIndex(t => t.topicId === tagItem.topicId);
				if (existingTagIndex > -1) {
					this.transientTagListInPopup.splice(existingTagIndex, 1);
				} else {
					this.transientTagListInPopup.push({
						topicId: tagItem.topicId,
						topicTitle: tagItem.title || tagItem.topicTitle,
						isPredefined: true
					});
				}
			},
			async addCustomTagFromPopupInput() {
				if (!this.newCustomTagInPopup.trim()) {
					uni.showToast({
						title: '请输入标签内容',
						icon: "none"
					});
					return;
				}
				try {
					const res = await postChooseTopic({
						title: this.newCustomTagInPopup.trim()
					});
					if (res.data.code === 500) {
						uni.$u.toast(res.data.msg);
					} else if (res.data && res.data.data) {
						const newTagData = {
							topicId: res.data.data.topicId,
							topicTitle: res.data.data.title,
							isPredefined: false
						};
						if (!this.transientTagListInPopup.some(t => t.topicId === newTagData.topicId)) {
							this.transientTagListInPopup.push(newTagData);
						}
						if (!this.customTagsInPopup.some(t => t.topicId === newTagData.topicId)) {
							this.customTagsInPopup.push(newTagData);
						}
						this.newCustomTagInPopup = '';
					} else {
						uni.$u.toast('添加自定义标签失败：无效响应');
					}
				} catch (error) {
					uni.$u.toast('添加自定义标签失败');
				}
			},
			removeCustomTagInPopup(index) {
				const removedTag = this.customTagsInPopup.splice(index, 1)[0];
				if (removedTag) {
					const mainListIndex = this.transientTagListInPopup.findIndex(t => t.topicId === removedTag.topicId);
					if (mainListIndex > -1) {
						this.transientTagListInPopup.splice(mainListIndex, 1);
					}
				}
			},
			async confirmAndSaveTags() {
				let params = {
					userId: this.$store.state.userInfo.userId,
					topicsIds: [...new Set(this.transientTagListInPopup.map(item => String(item.topicId)))],
				};
				try {
					const res = await getUserInfoUpdate(params);
					if (res.data.code === 500 || (res.data.code !== 200 && res.data.code !== 0)) {
						uni.$u.toast(res.data.msg || '标签更新失败');
					} else {
						// 直接修改本地副本
						this.userInformation.topicsList = JSON.parse(JSON.stringify(this.transientTagListInPopup));
						// 如果需要，也可以通过$emit将更新后的tagList传递给父组件
						this.$emit('updateData', this.userInformation.topicsList);
						uni.showToast({
							title: '标签已更新'
						});
						this.closeTagSelectionPopup();
					}
				} catch (error) {
					uni.$u.toast('标签更新请求失败');
				}
			},
			onChat() {
				uni.navigateTo({
					url: "/pages_sub/user/chat/chat?user=" + JSON.stringify(this.userInformation)
				})
			},
			onPower() {
				uni.navigateTo({
					url: "/pages_sub/user/power/power"
				})
			},
			onStore() {
				uni.navigateTo({
					url: "/pages_sub/user/store/store"
				})
			},
			onRelease() {
				uni.navigateTo({
					url: "/pages_sub/user/release/release?userId=" + (this.userInformation ? this.userInformation
						.userId : '')
				})
			},
			onAlbum() {
				uni.navigateTo({
					url: "/pages_sub/user/album/album?userId=" + (this.userInformation ? this.userInformation
						.userId : '')
				})
			},
			onGuide() {
				uni.navigateTo({
					url: "/pages_sub/guide/create-guide?userId=" + (this.userInformation ? this.userInformation
						.userId : '')
				})
			},
			generateQiniuToken(originalFilename) {
				return new Promise((resolve, reject) => {
					let params = {
						originalFilename: originalFilename,
						purpose: "avatar"
					}
					getQiniuToken(params).then(res => {
						if (res.data && res.data.data && res.data.data.token) {
							this.uploadToken = res.data.data.token
							this.uploadKey = res.data.data.key
							resolve(true)
						} else {
							uni.$u.toast('获取上传凭证失败');
							reject(new Error('Failed to get Qiniu token'));
						}

					}).catch(err => {
						uni.$u.toast('获取上传凭证接口失败');
						reject(err);
					});
				})
			},
			async uploadHeaderBg() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						const tempFile = res.tempFiles[0];
						const filePath = res.tempFilePaths[0];
						const originalFilename = tempFile.name ||
							`avatar_${Date.now()}.${filePath.split('.').pop() || 'jpg'}`;

						uni.showLoading({
							title: '上传中...'
						});

						try {
							await this.generateQiniuToken(originalFilename);

							const uploadResult = await new Promise((resolve, reject) => {
								uni.uploadFile({
									url: this.$store.state.qiNiuUploadUrl,
									filePath: filePath,
									name: "file",
									formData: {
										token: this.uploadToken,
										key: this.uploadKey
									},
									success: (uploadRes) => {
										try {
											const data = JSON.parse(uploadRes.data);
											if (data.key) {
												resolve(
													`${this.$store.state.ossBaseUrl}/${data.key}`
												);
											} else {
												reject(new Error(
													'七牛云返回数据缺少key'
												));
											}
										} catch (e) {
											reject(new Error('上传响应解析错误'));
										}
									},
									fail: (err) => {
										reject(new Error('上传接口请求失败'));
									}
								});
							});

							const qiniuUrl = uploadResult;
							let params = {
								userId: this.$store.state.userInfo.userId,
								background: qiniuUrl
							}

							const updateRes = await updateUserBackground(params);

							if (updateRes.data.code === 500 || (updateRes.data.code !== 200 && updateRes
									.data.code !== 0)) {
								uni.$u.toast(updateRes.data.msg || '背景图更新失败');
							} else {
								this.userInformation.background = qiniuUrl;
								this.cachedHeaderBg = await this.$imageCache.getImage(qiniuUrl);
								// 如果父组件通过 $store 更新用户信息，这里可以不用 $emit
								// 否则需要 $emit('update:userInfo', this.userInformation);
								// 或者 $emit('avatarChanged', qiniuUrl);
								this.$store.commit('setUserInfo', {
									...this.$store.state.userInfo,
									background: qiniuUrl
								});
								uni.showToast({
									title: '背景图更换成功'
								});
								this.showHeaderBg = false;
							}

						} catch (error) {
							uni.$u.toast(error.message || '操作失败');
						} finally {
							uni.hideLoading();
						}
					},
					fail: (err) => {
						if (err.errMsg !== 'chooseImage:fail cancel') {
							uni.$u.toast('选择图片失败');
						}
					}
				});
			},
			downloadHeaderBg() {
				if (!this.userInformation.avatar) {
					uni.$u.toast('没有背景图可供下载');
					return;
				}
				uni.showLoading({
					title: '下载中...'
				});
				uni.downloadFile({
					url: this.userInformation.background, // 使用原始网络URL进行下载
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: '已保存到相册',
										icon: 'success'
									});
								},
								fail: (err) => {
									if (err.errMsg && err.errMsg.includes('auth deny')) {
										this.openSettings();
									} else {
										uni.$u.toast('保存失败: ' + (err.errMsg || '未知错误'));
									}
								}
							});
						} else {
							uni.$u.toast(`下载失败: ${res.statusCode}`);
						}
					},
					fail: (err) => {
						uni.$u.toast('下载接口调用失败: ' + (err.errMsg || ''));
					},
					complete: () => uni.hideLoading()
				});
			},
			async uploadAvatar() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						const tempFile = res.tempFiles[0];
						const filePath = res.tempFilePaths[0];
						const originalFilename = tempFile.name ||
							`avatar_${Date.now()}.${filePath.split('.').pop() || 'jpg'}`;

						uni.showLoading({
							title: '上传中...'
						});

						try {
							await this.generateQiniuToken(originalFilename);

							const uploadResult = await new Promise((resolve, reject) => {
								uni.uploadFile({
									url: this.$store.state.qiNiuUploadUrl,
									filePath: filePath,
									name: "file",
									formData: {
										token: this.uploadToken,
										key: this.uploadKey
									},
									success: (uploadRes) => {
										try {
											const data = JSON.parse(uploadRes.data);
											if (data.key) {
												resolve(
													`${this.$store.state.ossBaseUrl}/${data.key}`
												);
											} else {
												reject(new Error(
													'七牛云返回数据缺少key'
												));
											}
										} catch (e) {
											reject(new Error('上传响应解析错误'));
										}
									},
									fail: (err) => {
										reject(new Error('上传接口请求失败'));
									}
								});
							});

							const qiniuUrl = uploadResult;
							let params = {
								userId: this.$store.state.userInfo.userId,
								avatar: qiniuUrl
							}

							const updateRes = await getUserInfoUpdate(params);

							if (updateRes.data.code === 500 || (updateRes.data.code !== 200 && updateRes
									.data.code !== 0)) {
								uni.$u.toast(updateRes.data.msg || '头像更新失败');
							} else {
								this.userInformation.avatar = qiniuUrl;
								this.cachedUserAvatar = await this.$imageCache.getImage(qiniuUrl);
								// 如果父组件通过 $store 更新用户信息，这里可以不用 $emit
								// 否则需要 $emit('update:userInfo', this.userInformation);
								// 或者 $emit('avatarChanged', qiniuUrl);
								this.$store.commit('setUserInfo', {
									...this.$store.state.userInfo,
									avatar: qiniuUrl
								});
								uni.showToast({
									title: '头像更换成功'
								});
								this.showAvatar = false;
							}

						} catch (error) {
							uni.$u.toast(error.message || '操作失败');
						} finally {
							uni.hideLoading();
						}
					},
					fail: (err) => {
						if (err.errMsg !== 'chooseImage:fail cancel') {
							uni.$u.toast('选择图片失败');
						}
					}
				});
			},
			downloadAvatar() {
				if (!this.userInformation.avatar) {
					uni.$u.toast('没有头像可供下载');
					return;
				}
				uni.showLoading({
					title: '下载中...'
				});
				uni.downloadFile({
					url: this.userInformation.avatar, // 使用原始网络URL进行下载
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									uni.showToast({
										title: '已保存到相册',
										icon: 'success'
									});
								},
								fail: (err) => {
									if (err.errMsg && err.errMsg.includes('auth deny')) {
										this.openSettings();
									} else {
										uni.$u.toast('保存失败: ' + (err.errMsg || '未知错误'));
									}
								}
							});
						} else {
							uni.$u.toast(`下载失败: ${res.statusCode}`);
						}
					},
					fail: (err) => {
						uni.$u.toast('下载接口调用失败: ' + (err.errMsg || ''));
					},
					complete: () => uni.hideLoading()
				});
			},
			openSettings() {
				uni.showModal({
					title: '提示',
					content: '需要相册权限，是否去设置？',
					success: (res) => {
						if (res.confirm) uni.openSetting();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.footerBtn {
		display: flex;
		justify-content: space-between;
		padding-bottom: 60rpx;

		.btnItemImg-left {
			background: url('/static/user/my-dr-btnBackImg.png') no-repeat center center;
			background-size: cover;
		}

		.btnItemImg-right {
			background: url('/static/user/my-xd-btnBackImg.png') no-repeat center center;
			background-size: cover;
		}

		.btnItem {
			display: flex;
			justify-content: space-between;
			width: calc(50% - 10rpx);
			height: 140rpx;
			align-items: center;
			border-radius: 20rpx;
			// background: linear-gradient(to right, rgba(255, 241, 219, 1), rgba(255, 255, 255, 1));
			background: url('/static/user/my-dr-btnBackImg.png') no-repeat center center;
			background-size: cover;

			.btnItem-left {
				margin: 32rpx 0 32rpx 30rpx;

				.btnItem-left-top {
					font-weight: bold;
					font-size: 30rpx;
					line-height: 30rpx;
					margin-bottom: 20rpx;
				}

				.btnItem-left-bottom {
					font-weight: 400;
					font-size: 24rpx;
					line-height: 26rpx;
				}
			}

			.btnItem-right {}
		}
	}

	.user-info {
		padding-bottom: 100rpx;
		position: relative;
	}

	.user-info-my {
		position: relative;
		// background-image: url("@/static/my/my_bg.jpg");
		background-size: 100% 100%;
		margin-top: -20rpx;
		border-radius: 20rpx;

		.user-info-my-bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.my-block {
			background: none;
		}



		.user-des {
			font-size: 24rpx;
			color: #949298;
			padding: 20rpx 0;
			position: relative;
			line-height: 2;
			// border-bottom: 1rpx solid #F5F5F5;
		}
	}

	page {
		background-color: #F3F3F3;
	}

	.user-info-header {
		position: relative;
		height: 540rpx;

		.head_bg_container {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.head_bg {
			width: 100%;
			height: 100%;
		}

		.head_bg_overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6); // 黑色半透明蒙层，可以根据需要调整透明度
			// 或者使用其他颜色的蒙层，例如：
			// background-color: rgba(255, 255, 255, 0.8); // 白色半透明蒙层
			// background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.3)); // 渐变蒙层
		}

		.user-avatar {
			position: absolute;
			display: flex;
			align-items: center;
			top: 80rpx;
			left: 30rpx;

			.name {
				padding-left: 40rpx;

				.title {
					display: flex;
					align-items: center;
					font-size: 38rpx;
					padding: 20rpx 20rpx 0 0;
					font-weight: 700;
					justify-content: space-between;

					.title-left {
						display: flex;
						color: #FFFFFF;
					}
				}

				.image {
					width: 40rpx;
					margin-left: 10rpx;
				}

				.title-right {
					display: flex;
					color: #fff;
					background-color: #FE4E4E;
					border-radius: 50rpx;
					font-size: 26rpx;
					margin-left: 20rpx;
					padding: 5rpx 15rpx;

					.icon {
						margin-right: 5rpx;
					}

				}

				.title-right-zh {
					font-size: 24rpx;
					color: rgba(255, 255, 255, .7);
					margin-right: 50rpx;
					margin-top: 10rpx;
				}

				.active {
					color: #cccccc;
					border: 1rpx solid #cccccc;
				}

				.title_sub {
					font-size: 24rpx;
					color: #949298;
					display: flex;

					align-items: center;
				}
			}
		}

		.my-data {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: absolute;
			// width: 100%;
			top: 280rpx;
			left: 60rpx;
			color: #FFFFFF;

			&-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 100rpx;

				.num {
					font-size: 35rpx;
				}

				.text {
					font-size: 24rpx;
				}
			}
		}

		.action-entry-section {
			padding: 20rpx 10rpx;
			/* 左侧留出边距 */
			position: relative;
			margin-top: -170rpx;
		}

		.action-entry-scroll {
			width: 100%;
			white-space: nowrap;
			/* 核心：让子元素横向排列 */
		}

		.action-entry-list {
			display: flex;
			/* 让scroll-view的直接子元素也表现为flex */
		}

		.action-entry-item {
			display: inline-flex;
			/* 使用 inline-flex 使其横向排列 */
			flex-direction: column;
			width: 220rpx;
			/* 关键：每个项目的宽度，750rpx/3.5 ≈ 214rpx，这里取一个合适的值 */
			// height: 180rpx;
			background-color: rgb(255, 255, 255, 0.3);
			border-radius: 20rpx;
			padding: 10rpx 24rpx;
			margin-right: 20rpx;
			box-sizing: border-box;
			justify-content: space-around;
			/* 垂直方向均匀分布 */
			letter-spacing: 2rpx;

			.entry-item-title {
				display: flex;
				align-items: flex-end;
			}

			.entry-icon {
				color: #FFFFFF;
				margin-right: 10rpx;
				font-size: 38rpx;
				font-weight: 100;
			}

			.entry-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 5rpx;
			}

			.entry-subtitle {
				text-align: center;
				font-size: 20rpx;
				color: rgb(255, 255, 255, 0.8);
			}
		}
	}



	.i-data {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 20rpx;

		&-row {
			display: flex;
			margin-bottom: 20rpx;
			align-items: flex-end;
			font-size: 26rpx;

			&-sub {
				width: 120rpx;
				color: #73737D;
			}

			&-none {
				// color: #73737D;
				// font-size: 22rpx;
			}
		}

		&-left {
			flex: 1.5;
		}

		&-right {
			flex: 1;
		}
	}

	.my-block {
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		padding: 20rpx 30rpx 20rpx 40rpx;
		position: relative;

		.tag-header-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15rpx;

			.tag-action-prompt {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #888888;
			}
		}

		.mask-layer {
			font-size: 24rpx;
			color: #207BDB;
		}

		.tip {
			position: absolute;
			right: 40rpx;
			top: 10rpx;
			width: 80rpx;
		}

		.title {
			font-size: 32rpx;
			display: flex;
			align-items: flex-end;
			color: #2F2E35;
			font-weight: bold;
			justify-content: space-between;

			.small {
				font-size: 24rpx;
				color: #333;
				font-weight: 100;
				margin-left: 40rpx;
			}
		}
	}

	.tag-empty-state {
		background-image: url("http://www.hacn86.cn/home_page/2025/07/11/1752220708668_20250711155828A011.png");
		background-size: 100% 100%;
		height: 160rpx;
	}

	.tag-box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		align-items: center;
		color: #2F2E35;
		gap: 20rpx;


		/* (关键新增) 自定义标签包裹容器的样式 */
		.custom-tag-wrapper {
			display: inline-flex;
			/* 使用 inline-flex 使其行为类似一个整体的标签 */
			align-items: center;
			border-radius: 50rpx;
			/* 设置圆角 */
			padding: 8rpx 0 8rpx 16rpx;
			/* 左侧留出空间给图标 */
			overflow: hidden;
			/* 确保子元素不会超出圆角 */
		}


		::v-deep .u-tag {
			/* plain 模式下 u-tag 的背景是透明的，正好符合我们的需求 */
			border: none !important;
			/* 移除 u-tag 自身的边框 */
			margin: 0 !important;
			/* 移除 u-tag 可能的默认外边距 */
		}

		.round {
			width: 20rpx;
			height: 20rpx;
			background: #FFFFFF;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		&-item {
			display: flex;
			align-items: center;
			border-radius: 15rpx;
			border: none;
			margin: 0 20rpx 20rpx 0;
		}
	}

	/* 字体图标的样式 */
	.tag-icon {
		font-size: 28rpx;
		/* 根据你的图标大小调整 */
		padding-left: 20rpx;
	}

	.icon-tag1 {
		color: #FAE13E;
	}

	.icon-tag2 {
		color: #F1903D;
	}

	.icon-tag3 {
		color: #31E6E3;
	}

	.icon-tag4 {
		color: #C4E011;
	}

	.icon-tag5 {
		color: #DE5232;
	}

	.icon-tag6 {
		color: #FAE13E;
	}

	.my-store :nth-child(4n) {
		margin-right: 0 !important;
	}

	.my-store {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		&-item {
			width: 145rpx;
			margin: 20rpx 20rpx 20rpx 0;
			border-radius: 10rpx;
			position: relative;

			&-price {
				margin: 10rpx 0;
				font-size: 24rpx;
				font-weight: 700;

				.line {
					margin-left: 20rpx;
					font-weight: 300;
				}
			}

			&-content {
				font-size: 20rpx;
				text-align: center;
			}

			.image {
				width: 100%;
				height: 100rpx;
				border-radius: 20rpx;
			}

			.tip {
				position: absolute;
				width: 50rpx;
				left: 0;
				top: -20rpx;
			}

			.line {
				text-decoration: line-through;
				color: #666;
			}
		}
	}

	.my-power {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0 !important;

		.my-power-left {
			display: flex;
		}

		.my-power-right {
			display: flex;
			color: #BDBDBD;
			font-size: 24rpx;
		}
	}

	.my-release {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 10rpx;

		.my-release-item {
			display: flex;
			flex-grow: 1;
			overflow-x: auto;
			margin-right: 15rpx;

			&::-webkit-scrollbar {
				display: none;
			}

			-ms-overflow-style: none;
			scrollbar-width: none;

			.image {
				height: 145rpx;
				width: 145rpx;
				margin-right: 15rpx;
				border-radius: 15rpx;
				flex-shrink: 0;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.user-btn {
		background: #FD4D4D;
		width: 80%;
		position: fixed;
		bottom: 50rpx;
		margin-left: 10%;
		height: 80rpx;
		border-radius: 20rpx;
		color: #FFFFFF;
		letter-spacing: 15rpx;
		font-size: 34rpx;
		text-align: center;
		font-weight: bolder;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-avatar {
		width: 600rpx;
		padding-top: 80rpx;
		height: calc(100vh - 100rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.close {
			width: 20rpx;
			position: absolute;
			top: 100rpx;
			left: -40rpx;
		}

		.popup-avatar-group {
			background-color: #222222;
			color: #FFFFFF;
			border-radius: 20rpx;
			width: 550rpx;
			margin-top: 150rpx;

			&-item {
				display: flex;
				padding: 20rpx 40rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #2D2D2D;
			}

			&-item:last-child {
				border-bottom: none;
			}
		}
	}

	.tag-popup-content {
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 20rpx;
	}

	.tag-category-section {
		margin-bottom: 30rpx;
	}

	.popup-section-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	.tag-item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.popup-tag-item {
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
	}

	.custom-tag-input-section {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.custom-tag-input-add {
			margin-left: 10rpx;
		}
	}

	.popup-footer {
		margin-top: 30rpx;
		padding: 20rpx 0;
		border-top: 1rpx solid #eee;
	}

	.album-header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
		z-index: 2;
		position: relative;

		.title {}

		.album-action-prompt {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #888888;
		}
	}

	.album-content-area {
		height: 160rpx;
	}

	.album-empty-state {
		position: absolute;
		width: 100%;
		z-index: 1;
		height: 260rpx;
		top: 0;
	}

	.album-list-display {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;

		.album-list-scroll {
			display: flex;
			flex-grow: 1;
			overflow-x: auto;
			margin-right: 15rpx;
			padding-bottom: 5rpx;

			&::-webkit-scrollbar {
				display: none;
			}

			-ms-overflow-style: none;
			scrollbar-width: none;

			.album-item {
				flex-shrink: 0;
				margin-right: 15rpx;

				&:last-child {
					margin-right: 0;
				}

				.album-item-image {
					width: 145rpx;
					height: 145rpx;
					border-radius: 12rpx;
					background-color: #f0f0f0;
					display: block;
				}
			}
		}
	}
</style>